<template>
  <div class="home-content">
    <div class="left-menu box_shadow">
      <el-menu
        default-active="/vueKnowledge/konwledgeOne"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item v-for="(item,index) in mentListData" :key="index" :index="item.path">
          <span :class="`iconfont icon-${item.meta.icon}`"></span>
          <span class="ml-1 select-none">{{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-content w-full h-full box_shadow overflow-hidden relative">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      mentListData: [] as any,
      menuEvent: () => {
        let menu = router.options.routes;
        let mentList = [] as any;
        let hash = location.hash?.slice(2);
        menu?.forEach((e: any) => {
          if (e.name == "Layout") {
            mentList = e.children;
          }
        });
        nextTick(() => {
          mentList?.forEach((e: any) => {
            if (e.name == hash) {
              state.mentListData = e.children;
            }
          });
        });
      },
    });
    onMounted(() => {
      state.menuEvent();
    });
    watch(
      () => location.hash,
      (n: any, o: any) => {
        if (n) {
          state.menuEvent();
        }
      }
    );
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.home-content {
  width: 100%;
  height: 100%;
  display: flex;
  .left-menu {
    flex: 1;
    height: 100%;
    user-select: none;
    background-color: $themeBackground;
    .el-menu-vertical-demo{
      height: 100%;
      width: 100%;
    }
  }
  .right-content {
    flex: 7;
    margin-left: 10px;
    background-color: $themeBackground;
  }
}
</style>
